<template>
  <div class="relative h-screen flex items-center justify-center bg-gradient-to-br to-purple-800  text-white"
    :style="{ backgroundColor: ciDdata?.bg_color ? ciDdata.bg_color : '#fff555' }">
    <div class="container mx-auto px-6 text-center">
      <h1 class="text-4xl lg:text-6xl font-bold mb-6 animate-fade-in">
        {{ ciDdata?.title }}
      </h1>
      <p class="text-xl lg:text-2xl mb-10 max-w-2xl mx-auto animate-fade-in delay-100">
        {{ ciDdata?.description }}
      </p>
      <div class="flex flex-col sm:flex-row justify-center gap-4 animate-fade-in delay-200">
        <button class="px-8 py-3 bg-white text-indigo-600 font-medium rounded-lg hover:bg-gray-100 transition-colors"
          @click="scrollToSection('products')">
          产品服务
        </button>
        <button
          class="px-8 py-3 border-2 border-white text-white font-medium rounded-lg hover:bg-indigo hover:bg-opacity-10 transition-colors"
          @click="scrollToSection('contact')">
          联系我们
        </button>
      </div>
    </div>

    <button @click="scrollToNext"
      class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce text-white hover:text-indigo-200 transition-colors"
      aria-label="向下滚动">
      <!-- <ArrowDownIcon class="h-8 w-8" /> -->
      向下滚动
    </button>
  </div>
</template>
<script setup lang="ts">
import type { CompanyIntro } from "~/types/page-admin"

const props = defineProps<{
  ciDdata?: CompanyIntro
}>();

const scrollToNext = () => {
  const element = document.getElementById('about')
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}

const scrollToSection = (id: string) => {
  const element = document.getElementById(id)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}

</script>